<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
  <script>
    function f1(){
      let a = setInterval(function () {
        let image = document.getElementById("image");
        image.style.left = parseInt(image.style.left) + 50 + "px";
      },1000)

      // let b=setInterval(function (){
      //   let b1=document.getElementById("progress");
      //   b1.style.width=parseInt(b1.width.left)+50+"px";
      // },200)
      let progressBar = document.getElementById("progress");
      let currentWidth = 2;

      let b = setInterval(function (){
        if(currentWidth < 1000) {
          currentWidth += 10;
          progressBar.style.width = currentWidth + "px";
        } else {
          clearInterval(b); // 到达最大宽度后停止
        }
      }, 200);
    }
  </script>
</head>
<body>
<img id="image" onmouseover="f1()" style="position: relative;left: 0px" src="../images/heihei.gif">

<div class="c2" style="width: 1000px;height:50px;border:1px solid">
  <div  id="progress"  class="c2" style="position:relative;width:2px;height:100%;background: red;"></div>
</div>
</body>
</html>